.search {
  display: flex;
  width: 100%;
  .search_main {
    background-color: #fff;
    border-radius: 3px;
    height: 34px;
    flex: 1;
    display: flex;
    align-items: center;
    .search_city {
      // 这里使用最小宽，尽管是 胡尔浩特 这种名字较长的城市也能放得下
      min-width: 60px;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      span {
        padding: 0 3px;
        font-size: 13px;
      }
      // 如果要修改全局样式或第三方组件库类名的样式，类名需要用 :global{ } 包裹起来。类似于 Vue 中的 /deep/
      :global {
        .icon-arrow {
          color: #999;
          font-size: 10px;
        }
      }
    }

    .search_input {
      border-left: 1px solid #ddd;
      padding-left: 15px;
      display: flex;
      align-items: center;
      :global {
        .icon-search {
          color: #ccc;
        }
      }

      span {
        margin-left: 4px;
        color: #999;
        font-size: 12px;
      }
    }
  }

  .search_map {
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    :global {
      .icon-map {
        color: #fff;
        font-size: 24px;
      }
    }
  }
}
